<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-link to="/my?id=1&name=张三">my</router-link>
    <router-link to="/find/12">find</router-link>
</div>
<!--我的-->
<template id="my">
    <div>
        <h1>我的</h1>
        <h2>{{ user.id }}</h2>
        <h2>{{ user.name }}</h2>
        <h2></h2>
    </div>
</template>
<!--发现-->
<template id="find">
    <div>
        <h1>发现</h1>
        <h2>{{ $route.params.id }}</h2>
        <h2></h2>
        <h2></h2>
    </div>
</template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    // 引入路由
    import {} from './js/vue-router.js'

    let my = {
        template: '#my',
        data() {
            return {
                user: []
            }
        },
        methods: {
            getUser() {
                this.user = {id: this.$route.query.id, name: this.$route.query.name}
            }
        },
        created() {
            this.getUser()
        },
        watch: {
            $route(to, from) {
                this.getUser()
            }
        }
    }
    let find = {
        template: '#find'
    }

    //定义路由
    const routes = [
        {path: '/', component: my},
        {path: '/my', component: my},
        {path: '/find/:id', component: find},
    ]
    // 创建路由
    const router = new VueRouter({
        routes
    })


    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
        },
        components: {},
        router
    })
</script>